<template>
  <!-- 岗位人员管理 -->
  <div class="app-container">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      :inline="true"
      class="demo-ruleForm"
      v-show="showSearch"
    >
      <el-form-item label="学院">
        <!-- <el-cascader v-model="ruleForm.xyDeptId" :options="deptOptions" clearable
                    :props="{ value: 'id', currentLabels: 'label', checkStrictly: true }" @change="handleChange"
                    @keyup.enter.native="search"></el-cascader> -->
        <el-select
          v-model="ruleForm.xyDeptId"
          placeholder="请选择"
          clearable
          class="elSelect"
          style="width: 100%"
        >
          <el-option
            v-for="item in collegeData"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="专业">
        <el-select
          v-model="ruleForm.specialityId"
          clearable
          placeholder="请选择专业"
          @keyup.enter.native="search"
        >
          <el-option
            v-for="item in profession"
            :key="item.VALUE"
            :label="item.TITILE"
            :value="item.VALUE"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用工部门" prop="deptId">
        <el-cascader
          v-model="ruleForm.deptId"
          :options="deptOptions"
          clearable
          :props="{ value: 'id', currentLabels: 'label', checkStrictly: true }"
          @change="handleChanges"
          @keyup.enter.native="search"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="学生姓名">
        <el-input
          v-model.trim="ruleForm.studentName"
          clearable
          placeholder="请输入学生姓名"
        ></el-input>
      </el-form-item>
      <div style="float: right; text-align: right">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
          size="mini"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </div>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          v-hasPermi="['wsp:postemp:add']"
          @click="handleAdd"
          v-if="activeTab == 0 ? true : false"
          >新增</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
    </el-row>
    <div class="tabs">
      <div class="tabs-header">
        <span
          class="tabs-nav"
          v-bind:class="{ 'tabs-nav-selected': activeTab === index }"
          v-for="(tab, index) in tabs"
          @click="handleTabClick(index)"
          :key="index"
        >
          {{ tab }}
        </span>
      </div>
      <div class="tabs-content">
        <div v-show="activeTab == 0">
          <onDuty ref="ondutys"></onDuty>
        </div>
        <div v-show="activeTab == 1">
          <applicant ref="applincant"></applicant>
        </div>
        <div v-show="activeTab == 2">
          <history ref="history"></history>
        </div>
      </div>
    </div>
    <!-- 添加或修改角色配置对话框 -->
    <el-dialog
      title="新增"
      :visible.sync="open"
      width="30%"
      append-to-body
      @close="cancel"
      destroy-on-close
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="用工部门" prop="deptId">
              <el-cascader
                ref="cascaderAddr"
                v-model="form.deptId"
                :options="deptOptions"
                style="width: 100%"
                clearable
                :props="{
                  value: 'id',
                  currentLabels: 'label',
                  checkStrictly: true,
                }"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用工岗位" prop="wdpId">
              <el-select
                v-model="form.wdpId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in selectorList"
                  :key="dict.VALUE"
                  :label="dict.LABEL"
                  :value="dict.VALUE"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="学生注册号" prop="sno">
              <el-input v-model.trim="regCode" placeholder="请输入学生注册号" />
              {{ form.studentName }} {{ form.dm }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型" prop="povertyType">
              <el-select
                v-model="form.povertyType"
                clearable
                placeholder="请选择贫困类型"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in dict.type.wsp_poverty_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开户银行" prop="bankName">
              <el-input
                v-model.trim="form.bankName"
                placeholder="请输入开户银行"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="银行卡号" prop="cardNumber">
              <el-input
                v-model.trim="form.cardNumber"
                placeholder="请输入银行卡号"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          <p style="color: #4095e5">
            温馨提示：新增的学生将不需要审核，直接入岗
          </p>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import onDuty from "./components/onDuty.vue";
import applicant from "@/views/worStudy/postManagement/components/applicant.vue";
import history from "./components/history.vue";
import { deptTreeSelect } from "@/api/system/user";
import { getSpecialityByDeptId } from "@/api/information/unitMajor";
import { getStudentDpm } from "@/api/psychological/basic";
import { selector, postempAdd } from "@/api/worStudy/postManagement";
import { collegeSelect } from "@/api/information/studentInfor";
export default {
  dicts: [
    "basic_stu_duties", // 学生担任职务字典
    "wsp_poverty_type", // 类型
  ],
  components: {
    onDuty,
    applicant,
    history,
  },
  data() {
    return {
      ruleForm: {
        pageNum: 1,
        pageSize: 10,
        wdpType: "XR",
        specialityId: "",
        studentName: "",
      },
      deptOptions: [],
      collegeData: [],
      profession: [],
      selectorList: [],
      showSearch: true,
      tabs: ["在岗人员管理", "岗位人员申请管理", "历史在岗人员管理"],
      activeTab: 0,
      form: {
        studentName: undefined,
        dm: undefined,
      },
      open: false,
      regCode: "", // 注册号
      rules: {
        deptId: [
          { required: true, message: "请选择用工部门", trigger: "change" },
        ],
        wdpId: [
          { required: true, message: "请选择用工岗位", trigger: "change" },
        ],
        povertyType: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
        bankName: [
          { required: true, message: "请输入开户银行", trigger: "blur" },
        ],
        cardNumber: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
          {
            pattern: /^\d{16,19}$/,
            message: "请填写正确的银行卡号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    regCode(curVal, oldVal) {
      // 实现input连续输入，只发一次请求
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.handleChangeName(curVal);
      }, 500);
    },
  },
  created() {
    this.department();
    this.getCollegeData();
    this.$nextTick(() => {
      this.handleTabClick(this.activeTab);
    });
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleChangeName(value) {
      console.log(value, "注册号");
      if (value === "") {
        return false;
      } else {
        getStudentDpm({ regCode: value }).then((res) => {
          this.form.studentName = res.data.STUDENTNAME;
          this.form.dm = res.data.DPM;
          this.form.studentId = res.data.STUDENT_ID;
        });
      }
    },
    // 获取列表信息
    getList(data) {
      postempList(data).then((response) => {
        console.log(response, "人员申请");
      });
    },
    // 获取部门信息
    async department() {
      await deptTreeSelect().then((res) => {
        this.deptOptions = res.data;
      });
    },
    getCollegeData() {
      collegeSelect().then((res) => {
        this.collegeData = res.data;
      });
    },
    handleChanges(value) {
      this.ruleForm.deptId = value[value.length - 1];
    },
    // 下拉树选择
    handleChange(value) {
      if (typeof value == "object") {
        // this.ruleForm.xyDeptId = value[value.length - 1];

        this.form.deptId = value[value.length - 1];
        if (this.form.deptId) {
          this.getSelector();
        }
        if (this.ruleForm.xyDeptId) {
          this.getSpeciality();
        }
      } else if (typeof value == "number") {
        this.ruleForm.xyDeptId = value;
        this.getSpeciality();
      } else if (value == undefined) {
        this.ruleForm.specialityId = "";
      }
    },
    getSpeciality() {
      if (this.ruleForm.xyDeptId) {
        getSpecialityByDeptId({ deptId: this.ruleForm.xyDeptId }).then(
          (res) => {
            if (res.code == "200") {
              this.profession = res.data;
            } else {
              console.log("123");
              this.profession = [];
            }
          }
        );
      } else {
        this.profession = [];
      }
    },
    getSelector() {
      if (this.form.deptId) {
        selector({ deptId: this.form.deptId }).then((res) => {
          console.log(res, "岗位下拉框");
          if (res.code == "200") {
           
            if(res.data.length > 0) {
                this.selectorList = res.data;
            }else {
                this.$modal.msgInfo("该部门下没有岗位");
            }
          } else {
            console.log("123");
            this.selectorList = [];
          }
        });
      } else {
        this.selectorList = [];
      }
    },
    // 添加
    handleAdd() {
      this.open = true;
      this.form = {}
      this.regCode = ''
    },
    cancel() {
      this.open = false;
       this.form = {}
      this.regCode = ''
    },
    // tab切换
    handleTabClick(index) {
      this.activeTab = index;
      if (index == 0) {
        this.ruleForm.wdpType = "XR";
        this.$refs.ondutys.getList(this.ruleForm);
      } else if (index == 1) {
        this.ruleForm.wdpType = "SQ";
        this.$refs.applincant.getList(this.ruleForm);
      } else if (index == 2) {
        this.ruleForm.wdpType = "LS";
        this.$refs.history.getList(this.ruleForm);
      }
    },
    handleQuery() {
      this.handleTabClick(this.activeTab);
      this.profession = [];
      console.log(this.ruleForm, "查询");
    },
    resetQuery() {
      this.ruleForm = {};
      this.profession = [];
      this.handleTabClick(this.activeTab);
    },
    /** 提交按钮 */
    submitForm: function () {
      if (this.regCode == "") {
        this.$modal.msgError("请填写注册号");
      } else {
        this.form.cardNumber = Number(this.form.cardNumber);
        this.$refs["form"].validate((valid) => {
          if (valid) {
            postempAdd(this.form).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.$refs.ondutys.getList(this.ruleForm);
                this.regCode = "";
                this.form = {};
              }
            });
          }
        });
      }
    },
  },
};
</script>
  
<style lang="scss" scoped>
.tabs-nav-selected {
  color: #3192fc;
  border-bottom: 1px solid #3192fc;
  padding-bottom: 3px;
}

.tabs-header {
  cursor: pointer;
  line-height: 30px;
  height: 30px;
}

.tabs-nav {
  line-height: 30px;
  margin-right: 5%;
}
</style>